<template>
  <common-page
    :common-ins="commonIns"
    :search-bar-data="searchBarData"
    :action-bar-data="actionBarData"
    :columns="columns"
  >
    <!-- 添加 编辑 -->
    <dialog-form ref="dialog" @confirm="dialogFn.confirm"></dialog-form>

    <!-- patchText 编辑  -->
    <dialog-patch-text ref="patchText" @confirm="dialogFn.patchTextConfirm"></dialog-patch-text>

    <!-- patchList 列表  -->
    <dialog-patch-list ref="patchList" @table-fn="dialogFn.patchListAction"></dialog-patch-list>

    <!-- patchList 添加 编辑  -->
    <dialog-patch-form ref="patchForm" @confirm="dialogFn.patchListConfirm"></dialog-patch-form>
  </common-page>
</template>

<script lang="ts" setup>
import { TableRowData } from 'tdesign-vue-next';
import { ref, watch } from 'vue';

import $api from '@/api';
import { $confirm, dialog, useCommon } from '@/hooks/common';
import CommonPage from '@/pages/common/page/index.vue';
import { mitter } from '@/utils/mitt';

import DialogForm from './components/DialogForm.vue';
import DialogPatchForm from './components/DialogPatchForm.vue';
import DialogPatchList from './components/DialogPatchList.vue';
import DialogPatchText from './components/DialogPatchText.vue';
import { ACTION_BAR_DATA, COLUMNS, SEARCH_BAR_DATA } from './constants';

const URL = import.meta.env.VITE_API_URL;

const API = $api.content.patch;
const searchBarData = ref([...SEARCH_BAR_DATA]);
const actionBarData = ref([...ACTION_BAR_DATA]);
const columns = ref(...[COLUMNS]);
const commonIns = useCommon({ API });

const patchText = ref(null);
const patchList = ref(null);
const patchForm = ref(null);

const curPatch = ref(null);

const dialogFn: Recordable = {
  ...commonIns.dialogFn,
  patchTextShow(data: any) {
    patchText.value.dialogShow('edit', data);
  },
  async patchTextConfirm(data: any) {
    await API.updateText(data);
    patchText.value.dialogHide();
  },
  patchListShow(data: any[]) {
    patchList.value.dialogShow('edit', data);
  },
  async patchListAction(type: string, row: TableRowData) {
    const updateList = async () => {
      const patchListData = await tableFn.getPatchList(curPatch.value.id);
      patchList.value.update(patchListData);
    };

    const fnMap: Recordable = {
      add() {
        patchForm.value.dialogShow('add');
      },
      async listorder() {
        await API.patchListSort({ id: row.id, listorder: row.listorder });
        updateList();
      },
      edit() {
        patchForm.value.dialogShow('edit', row);
      },
      async delete() {
        $confirm({ theme: 'danger', body: t('common.deleteConfirm') }, async () => {
          await API.patchListDel(row.id);
          updateList();
        });
      },
    };

    fnMap[type]();
  },
  async patchListConfirm(type: 'add' | 'edit', data: any) {
    const method = type === 'add' ? 'patchListAdd' : 'patchListUpdate';
    await API[method]({ ...data, patchId: curPatch.value.id });
    patchForm.value.dialogHide();

    const patchListData = await tableFn.getPatchList(curPatch.value.id);
    patchList.value.update(patchListData);
  },
};

// const actionFn: Recordable = {
//   ...commonIns.actionFn,
// };

const tableFn: Recordable = {
  ...commonIns.tableFn,
  async getPatchList(id: number) {
    const data = await API.patchList({ id });
    return data.map((v: Recordable) => {
      if (v.img) {
        v.imgUrl = URL + v.img.url;
      } else {
        v.imgrl = '';
      }

      return v;
    });
  },
  async editContent(row: TableRowData) {
    curPatch.value = row;
    if (row.type === 0) {
      const data = await API.detail(row.id);
      dialogFn.patchTextShow(data);
    } else {
      const patchList = await this.getPatchList(row.id);
      dialogFn.patchListShow({ title: row.title, patchList });
    }
  },
};

// const onAction = (item: ActionBarItem) => {
//   actionFn[item.key](item);
// };

watch(commonIns.selectedRowKeys, (val) => {
  actionBarData.value[1].disabled = !val.length;
  actionBarData.value[2].disabled = !val.length;
  actionBarData.value[3].disabled = !val.length;
});

mitter.on('content', (row: TableRowData) => {
  tableFn.editContent(row);
});
</script>
